import { type FC, useState } from 'react';
import {
    Form,
    InputNumber,
    Select,
    Button,
    Card,
    Row,
    Col,
    Typography,
    Divider,
    Alert,
    Space,
    type FormProps
} from 'antd';
import { UserOutlined } from '@ant-design/icons';
import type { IReducingFrom } from '../../type/index.ts';
const { Title, Text } = Typography;
const { Option } = Select;


const HomeComponent: FC = () => {
    const [form] = Form.useForm();
    const [bmiResult, setBmiResult] = useState<number | null>(null);
    const [bmiCategory, setBmiCategory] = useState<string>('');
    const [activeValue, setActiveValue] = useState<string>('');
    const [planResult, setPlanResult] = useState<number | null>(null);

    // 表单提交处理
    const onFinish: FormProps<IReducingFrom>['onFinish'] = (values) => {
        console.log('表单数据:', values);


        if (values.gender === 'male') setPlanResult((66 + (13.7 * values.weight) + (5 * values.height) - (6.8 * values.age)) * parseFloat(activeValue) - 500);
        else setPlanResult((665 + (9.6 * values.weight) + (1.8 * values.height) - (4.7 * values.age)) * parseFloat(activeValue) - 500)

        // 计算BMI
        if (values.height && values.weight) {
            // 将厘米转换为米
            const heightInMeters = values.height / 100;
            const bmi = values.weight / (heightInMeters * heightInMeters);
            setBmiResult(parseFloat(bmi.toFixed(1)));

            // 分类BMI
            if (bmi < 18.5) {
                setBmiCategory('Underweight');
            } else if (bmi < 25) {
                setBmiCategory('Normal weight');
            } else if (bmi < 30) {
                setBmiCategory('Overweight');
            } else {
                setBmiCategory('Obesity');
            }

        }
    };

    // 重置表单
    const onReset = () => {
        form.resetFields();
        setBmiResult(null);
        setBmiCategory('');
        setPlanResult(null);
    };


    return (
        <div style={{ padding: '24px', maxWidth: '800px', margin: '0 auto' }}>
            <Title level={2} style={{ textAlign: 'center', color: '#1890ff' }}>
                <UserOutlined /> 小宋自用BMI计算器及减脂计划表
                <h1 style={{ display: 'none' }}>小宋自用BMI计算器及减脂计划表</h1>
            </Title>

            <Text type="secondary" style={{ display: 'block', textAlign: 'center', marginBottom: '24px' }}>
                请输入您的个人信息以获取健康分析
            </Text>

            <Card style={{ boxShadow: '0 4px 8px rgba(0,0,0,0.1)' }}>
                <Form
                    form={form}
                    name="healthForm"
                    layout="vertical"
                    onFinish={onFinish}
                    autoComplete="off"
                >
                    <Row gutter={16}>
                        <Col xs={24} sm={12}>
                            <Form.Item<IReducingFrom>
                                label="性别"
                                name="gender"
                                rules={[{ required: true, message: '请选择您的性别' }]}
                            >
                                <Select placeholder="选择性别">
                                    <Option value="male">男性</Option>
                                    <Option value="female">女性</Option>
                                </Select>
                            </Form.Item>
                        </Col>

                        <Col xs={24} sm={12}>
                            <Form.Item<IReducingFrom>
                                label="年龄"
                                name="age"
                                rules={[
                                    { required: true, message: '请输入您的年龄' },
                                    { type: 'number', min: 1, max: 120, message: '年龄必须在1-120之间' }
                                ]}
                            >
                                <InputNumber
                                    placeholder="输入年龄"
                                    style={{ width: '100%' }}
                                    min={1}
                                    max={120}
                                    addonAfter="岁"
                                />
                            </Form.Item>
                        </Col>
                    </Row>

                    <Row gutter={16}>
                        <Col xs={24} sm={12}>
                            <Form.Item<IReducingFrom>
                                label="身高"
                                name="height"
                                rules={[
                                    { required: true, message: '请输入您的身高' },
                                    { type: 'number', min: 50, max: 250, message: '身高必须在50-250厘米之间' }
                                ]}
                            >
                                <InputNumber
                                    placeholder="输入身高"
                                    style={{ width: '100%' }}
                                    min={50}
                                    max={250}
                                    addonAfter="厘米"
                                />
                            </Form.Item>
                        </Col>

                        <Col xs={24} sm={12}>
                            <Form.Item<IReducingFrom>
                                label="体重"
                                name="weight"
                                rules={[
                                    { required: true, message: '请输入您的体重' },
                                    { type: 'number', min: 2, max: 300, message: '体重必须在2-300公斤之间' }
                                ]}
                            >
                                <InputNumber
                                    placeholder="输入体重"
                                    style={{ width: '100%' }}
                                    min={2}
                                    max={300}
                                    addonAfter="公斤"
                                />
                            </Form.Item>
                        </Col>
                    </Row>

                    <Row gutter={16}>
                        <Col xs={24} sm={12}>
                            <Form.Item<IReducingFrom>
                                label="活动水平"
                                name="active"
                                rules={[
                                    { required: true, message: '请输入您的活动水平' },
                                ]}
                            >
                                <Select id='active' placeholder="活动水平" style={{ width: '350px' }} value={activeValue} onChange={value => setActiveValue(value)}>
                                    <Option value='1.2'>轻度活动（几乎不运动,办公室工作）</Option>
                                    <Option value="1.375">轻度日常活动（一周运动1~2次）</Option>
                                    <Option value="1.55">中度活动（一周运动3~5次）</Option>
                                    <Option value="1.725">高强度活动（一周运动6~7次）</Option>
                                    <Option value="1.9">极高强度活动（专业运动）</Option>
                                </Select>
                            </Form.Item>
                        </Col>

                    </Row>

                    <Form.Item style={{ textAlign: 'center', marginTop: '24px' }}>
                        <Space>
                            <Button type="primary" htmlType="submit" size="large">
                                计算BMI
                            </Button>
                            <Button htmlType="button" onClick={onReset} size="large">
                                重置表单
                            </Button>
                        </Space>
                    </Form.Item>
                </Form>


                {bmiResult && (
                    <>
                        <Divider />
                        <Title level={4}>健康分析结果</Title>
                        <Alert
                            message={
                                <div>
                                    <Text strong>BMI指数: </Text>{bmiResult} - {bmiCategory}
                                </div>
                            }
                            description={
                                <div style={{ marginTop: '8px' }}>
                                    {bmiCategory === 'Underweight' && '您的体重过轻，建议增加营养摄入和适当锻炼。'}
                                    {bmiCategory === 'Normal weight' && '恭喜！您的体重在正常范围内，请保持健康的生活方式。'}
                                    {bmiCategory === 'Overweight' && '您的体重超重，建议适当控制饮食并增加运动量。'}
                                    {bmiCategory === 'Obesity' && '您的体重属于肥胖范围，建议咨询医生或营养师制定减重计划。'}
                                </div>
                            }
                            type={
                                bmiCategory === 'Underweight' ? 'warning' :
                                    bmiCategory === 'Normal weight' ? 'success' :
                                        bmiCategory === 'Overweight' ? 'info' : 'error'
                            }
                            showIcon
                        />
                        <Divider />
                        <Title level={4}>减脂计划</Title>
                        {planResult &&

                            <Row gutter={16}>
                                <Col xs={24} sm={12}>
                                    正常热量: {Math.floor(planResult)}
                                </Col>
                                <Col xs={24} sm={12}>
                                    断食日热量: {Math.floor(planResult * 0.25)}
                                </Col>
                            </Row>
                        }
                        <Title level={4}>可摄入热量计算</Title>
                        {planResult &&
                            <>
                                <Row gutter={16}>
                                    <Col xs={24} sm={12}>
                                        蛋白质摄入量: {Math.floor(planResult * 0.2)}
                                    </Col>
                                    <Col xs={24} sm={12}>
                                        断食日蛋白质摄入量: {Math.floor(planResult * 0.2 * 0.25)}
                                    </Col>
                                </Row>
                                <Row gutter={16}>
                                    <Col xs={24} sm={12}>
                                        脂肪摄入量: {Math.floor(planResult * 0.3)}
                                    </Col>
                                    <Col xs={24} sm={12}>
                                        断食日脂肪摄入量: {Math.floor(planResult * 0.3 * 0.25)}
                                    </Col>
                                </Row>
                                <Row gutter={16}>
                                    <Col xs={24} sm={12}>
                                        碳水摄入量: {Math.floor(planResult * 0.5)}
                                    </Col>
                                    <Col xs={24} sm={12}>
                                        断食日碳水摄入量: {Math.floor(planResult * 0.5 * 0.25)}
                                    </Col>
                                </Row>
                            </>
                        }
                        <Title level={4}>可摄入食物重量计算（g）</Title>
                        {planResult &&
                            <>
                                <Row gutter={16}>
                                    <Col xs={24} sm={12}>
                                        蛋白质摄入量: {Math.floor(planResult * 0.2 / 4)}
                                    </Col>
                                    <Col xs={24} sm={12}>
                                        断食日蛋白质摄入量: {Math.floor(planResult * 0.2 * 0.25 / 4)}
                                    </Col>
                                </Row>
                                <Row gutter={16}>
                                    <Col xs={24} sm={12}>
                                        脂肪摄入量: {Math.floor(planResult * 0.3 / 9)}
                                    </Col>
                                    <Col xs={24} sm={12}>
                                        断食日脂肪摄入量: {Math.floor(planResult * 0.3 * 0.25 / 9)}
                                    </Col>
                                </Row>
                                <Row gutter={16}>
                                    <Col xs={24} sm={12}>
                                        碳水摄入量: {Math.floor(planResult * 0.5 / 4)}
                                    </Col>
                                    <Col xs={24} sm={12}>
                                        断食日碳水摄入量: {Math.floor(planResult * 0.5 * 0.25 / 4)}
                                    </Col>
                                </Row>
                            </>
                        }
                    </>
                )}
            </Card>

            <div style={{ marginTop: '24px', textAlign: 'center' }}>
                <Text type="secondary">
                    提示：BMI（身体质量指数）是衡量体重与身高比例的常用指标
                </Text>
            </div>
        </div>
    );
};

export default HomeComponent;